Learn SQUARESPACE-DEVELOPER with Real Code Examples

# squarespace_developer/demo/CounterApp
1. Add a Code Block to a page
2. Add HTML: <button id='incrementBtn'>Increment</button> <span id='counterDisplay'>0</span>
3. Add JavaScript:
    let counter = 0
    document.getElementById('incrementBtn').addEventListener('click', () => {
        counter++
        document.getElementById('counterDisplay').textContent = counter
    })
4. Save and preview page

A basic Squarespace Developer example that increments a counter using JavaScript in a custom Code Block.

# squarespace_developer/demo/ToDoApp
1. Add a Code Block
2. Add HTML: <input id='taskInput' placeholder='New Task'> <button id='addTaskBtn'>Add</button> <ul id='taskList'></ul>
3. Add JavaScript:
    const addBtn = document.getElementById('addTaskBtn')
    const input = document.getElementById('taskInput')
    const list = document.getElementById('taskList')
    addBtn.addEventListener('click', () => {
        const li = document.createElement('li')
        li.textContent = input.value
        list.appendChild(li)
        input.value = ''
    })
4. Save and preview page

Create a basic To-Do list with Squarespace Code Block and JavaScript.

# squarespace_developer/demo/NotesApp
1. Add Code Block
2. Add HTML: <input id='noteInput' placeholder='Note'> <button id='addNoteBtn'>Add</button> <ul id='notesList'></ul>
3. Add JavaScript:
    const addBtn = document.getElementById('addNoteBtn')
    const input = document.getElementById('noteInput')
    const list = document.getElementById('notesList')
    addBtn.addEventListener('click', () => {
        const li = document.createElement('li')
        li.textContent = input.value
        list.appendChild(li)
        input.value = ''
    })
4. Save and preview page

Manage notes using Squarespace Code Block and JavaScript.

# squarespace_developer/demo/LoginForm
1. Add Code Block
2. Add HTML: <input id='email' placeholder='Email'> <input id='password' placeholder='Password' type='password'> <button id='loginBtn'>Login</button> <span id='loginMsg'></span>
3. Add JavaScript:
    document.getElementById('loginBtn').addEventListener('click', () => {
        const email = document.getElementById('email').value
        const password = document.getElementById('password').value
        document.getElementById('loginMsg').textContent = email && password ? 'Login successful' : 'Enter email and password'
    })
4. Save and preview page

A basic login form in Squarespace Code Block with simple JavaScript validation.

# squarespace_developer/demo/SignUpForm
1. Add Code Block
2. Add HTML: <input id='username' placeholder='Username'> <input id='email' placeholder='Email'> <button id='signUpBtn'>Sign Up</button> <span id='msg'></span>
3. Add JavaScript:
    document.getElementById('signUpBtn').addEventListener('click', () => {
        const username = document.getElementById('username').value
        const email = document.getElementById('email').value
        document.getElementById('msg').textContent = username && email ? 'Signed up successfully' : 'Fill all fields'
    })
4. Save and preview page

A simple sign-up form example using Squarespace Code Block and JavaScript.

# squarespace_developer/demo/ImageGallery
1. Add Code Block
2. Add HTML: <div id='gallery'></div>
3. Add JavaScript:
    const images = ['img1.jpg','img2.jpg','img3.jpg']
    const gallery = document.getElementById('gallery')
    images.forEach(src => {
        const img = document.createElement('img')
        img.src = src
        img.style.width = '100px'
        img.style.margin = '5px'
        gallery.appendChild(img)
    })
4. Save and preview page

Display a dynamic image gallery in Squarespace using Code Block and JavaScript.

# squarespace_developer/demo/Accordion
1. Add Code Block
2. Add HTML: <div class='accordion'><button>Section 1</button><div class='panel'>Content 1</div></div>
3. Add JavaScript:
    const acc = document.getElementsByClassName('accordion')[0].getElementsByTagName('button')[0]
    const panel = document.getElementsByClassName('panel')[0]
    acc.addEventListener('click', () => {
        panel.style.display = panel.style.display === 'block' ? 'none' : 'block'
    })
4. Save and preview page

Create an accordion component using Squarespace Code Block and JavaScript.

# squarespace_developer/demo/Tabs
1. Add Code Block
2. Add HTML: <button class='tabBtn'>Tab 1</button><button class='tabBtn'>Tab 2</button><div id='tabContent'></div>
3. Add JavaScript:
    const buttons = document.getElementsByClassName('tabBtn')
    const content = document.getElementById('tabContent')
    buttons[0].addEventListener('click', () => content.textContent = 'Content 1')
    buttons[1].addEventListener('click', () => content.textContent = 'Content 2')
4. Save and preview page

Create tab navigation in Squarespace using Code Block and JavaScript.

# squarespace_developer/demo/Modal
1. Add Code Block
2. Add HTML: <button id='openModal'>Open Modal</button><div id='modal' style='display:none'>Hello Modal<button id='closeModal'>Close</button></div>
3. Add JavaScript:
    document.getElementById('openModal').addEventListener('click', () => document.getElementById('modal').style.display = 'block')
    document.getElementById('closeModal').addEventListener('click', () => document.getElementById('modal').style.display = 'none')
4. Save and preview page

Display a modal popup using Squarespace Code Block and JavaScript.