Skip to content

Instantly share code, notes, and snippets.

@jcork4real

jcork4real/components-i-starter.markdown

Forked from emilyseibert/components-i-starter.markdown
Created May 12, 2020 13:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jcork4real/b72b25279eefe01a2863103cc19dba85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jcork4real/b72b25279eefe01a2863103cc19dba85 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @emilyseibert emilyseibert revised this gist Jan 13, 2020. 1 changed file with 0 additions and 65 deletions.
    65 changes: 0 additions & 65 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -38,68 +38,3 @@ const panelData = [
    // </div>
    // <!-- Remove this-->

    const createPanel = (title, content) => {
    const panel = document.createElement('div');
    const panelBar = document.createElement('div');
    const panelTitle = document.createElement('h3');
    const panelButtons = document.createElement('div');
    const btnOpen = document.createElement('button');
    const btnClose = document.createElement('button');
    const panelContent = document.createElement('div');

    panel.appendChild(panelBar);
    panel.appendChild(panelContent);

    panelBar.appendChild(panelTitle);
    panelBar.appendChild(panelButtons);

    panelButtons.appendChild(btnOpen);
    panelButtons.appendChild(btnClose);

    // set class names
    panel.classList.add('panel');
    panelBar.classList.add('panel-bar');
    panelButtons.classList.add('panel-buttons');
    btnOpen.classList.add('panel-btn-open');
    btnClose.classList.add('panel-btn-close', 'hide-btn');
    panelContent.classList.add('panel-content');
    // return a panel component
    console.log('panel component here')

    // add content
    const open = '\u25bc';
    const close = '\u25b2';
    btnOpen.textContent = open;
    btnClose.textContent = close;
    panelContent.textContent = content;
    panelTitle.textContent = title;

    // functionality!
    panelButtons.addEventListener('click', () => {
    btnOpen.classList.toggle('hide-btn');
    btnClose.classList.toggle('hide-btn');
    panelContent.classList.toggle('toggle-on');
    console.log('clicked!');
    });

    return panel;
    }

    const parentComponent = document.querySelector('.accordion');
    // const panelComponent = createPanel('fakedatatitle', 'fakecontent');
    // parentComponent.appendChild(panelComponent);

    // parentComponent.appendChild(createPanel(panelData[0].title), panelData[0].content);
    // parentComponent.appendChild(createPanel(panelData[1].title), panelData[1].content);
    // parentComponent.appendChild(createPanel(panelData[2].title), panelData[2].content);
    // parentComponent.appendChild(createPanel(panelData[3].title), panelData[3].content);

    panelData.forEach(data => {
    const newPanel = createPanel(data.title, data.content);
    parentComponent.appendChild(newPanel);
    })
    // create new function that will create a panel component exactly as you see it in the HTML
    // give the component functionality when the open or closed button is clicked, the content is toggled on/off
    // create components for each of the items in the above array.


  2. @emilyseibert emilyseibert created this gist Jan 13, 2020.
    7 changes: 7 additions & 0 deletions components-i-starter.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Components - I starter
    -----------------------


    A [Pen](https://codepen.io/emseibert/pen/yLLojRw) by [Emily Seibert](https://codepen.io/emseibert) on [CodePen](https://codepen.io).

    [License](https://codepen.io/emseibert/pen/yLLojRw/license).
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <div class="home">
    <header>
    <nav class="main-nav">
    <a href="https://learn.lambdaschool.com/" target="_blank" id="home-tag">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Blog</a>
    <a href="#" class="nav-item">Contact</a>
    </nav>
    </header>
    <section class="main-content">
    <h2 class="first-heading">HTML, CSS, or JS</h2>
    <p class="testing">No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
    else entirely. Legend, Mr Wayne.
    </p>
    </section>
    <section class="container secondary">
    <div class="accordion">

    </div>
    </section>
    </div>
    105 changes: 105 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    const panelData = [
    {
    title: "First Panel",
    content: "No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an idel and if they can't stop you then you become something else entirely. Legend, Mr Wayne."
    },

    {
    title: "Second Panel",
    content: "Tomorrow, you will be released. If you are bored of brawling with thieves and want to achieve something there is a rare blue flower that grows on the eastern slopes. Pick one of these flowers. If you can carry it to the top of the mountain, you may find what you were looking for in the first place."
    },
    {
    title: "Third Panel",
    content: "I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital."
    },
    {
    title: "Fourth Panel",
    content: "I'm here to ensure the League of Shadow fulfills its duty to restore balance to civilization. You yourself fought the decadence of Gotham for years with all your strength, all your resources, all your moral authority. And the only victory you achieved was a lie. Now, you understand? Gotham is beyond saving and must be allowed to die."
    },
    {
    title: "fifth panel",
    content: 'helloooo!'
    }
    ]

    // Remove panel from HTML
    // <!-- Remove this-->
    // <div class="panel">
    // <div class="panel-bar">
    // <h3>Title of Panel</h3>
    // <div class="panel-buttons">
    // <button class="panel-btn-open">&#9660</button>
    // <button class="panel-btn-close hide-btn">Close</button>
    // </div>
    // </div>
    // <div class="panel-content">
    // Content of panel
    // </div>
    // </div>
    // <!-- Remove this-->

    const createPanel = (title, content) => {
    const panel = document.createElement('div');
    const panelBar = document.createElement('div');
    const panelTitle = document.createElement('h3');
    const panelButtons = document.createElement('div');
    const btnOpen = document.createElement('button');
    const btnClose = document.createElement('button');
    const panelContent = document.createElement('div');

    panel.appendChild(panelBar);
    panel.appendChild(panelContent);

    panelBar.appendChild(panelTitle);
    panelBar.appendChild(panelButtons);

    panelButtons.appendChild(btnOpen);
    panelButtons.appendChild(btnClose);

    // set class names
    panel.classList.add('panel');
    panelBar.classList.add('panel-bar');
    panelButtons.classList.add('panel-buttons');
    btnOpen.classList.add('panel-btn-open');
    btnClose.classList.add('panel-btn-close', 'hide-btn');
    panelContent.classList.add('panel-content');
    // return a panel component
    console.log('panel component here')

    // add content
    const open = '\u25bc';
    const close = '\u25b2';
    btnOpen.textContent = open;
    btnClose.textContent = close;
    panelContent.textContent = content;
    panelTitle.textContent = title;

    // functionality!
    panelButtons.addEventListener('click', () => {
    btnOpen.classList.toggle('hide-btn');
    btnClose.classList.toggle('hide-btn');
    panelContent.classList.toggle('toggle-on');
    console.log('clicked!');
    });

    return panel;
    }

    const parentComponent = document.querySelector('.accordion');
    // const panelComponent = createPanel('fakedatatitle', 'fakecontent');
    // parentComponent.appendChild(panelComponent);

    // parentComponent.appendChild(createPanel(panelData[0].title), panelData[0].content);
    // parentComponent.appendChild(createPanel(panelData[1].title), panelData[1].content);
    // parentComponent.appendChild(createPanel(panelData[2].title), panelData[2].content);
    // parentComponent.appendChild(createPanel(panelData[3].title), panelData[3].content);

    panelData.forEach(data => {
    const newPanel = createPanel(data.title, data.content);
    parentComponent.appendChild(newPanel);
    })
    // create new function that will create a panel component exactly as you see it in the HTML
    // give the component functionality when the open or closed button is clicked, the content is toggled on/off
    // create components for each of the items in the above array.


    115 changes: 115 additions & 0 deletions style.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    @lightblue: #9bbeff;
    @blue: #1b6cff;
    @orange: #ffae1b;

    * {
    box-sizing: border-box;
    color: #191B1F;
    }
    body {
    font-family: Lato, sans-serif;
    }
    .container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding-top: 2rem;
    }
    .main-content {
    background: @lightblue;
    padding: 10px;
    box-shadow: inset 1px 1px 10px 10px rgba(@blue, 0.1);
    h2, p {
    color: white;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    }
    p {
    font-size: 18px;
    }
    }
    h1 {
    font-size: 1.5rem;
    }
    h2 {
    font-size: 1.5rem;
    }
    p {
    margin: 20px 0;
    line-height: 1.25;
    }
    header {
    width: 100vw;
    height: 15vh;
    padding-top: 2rem;
    }
    nav {
    display: flex;
    justify-content: space-evenly;
    align-items: start;

    }
    nav a {
    text-decoration: none;
    border: 2px solid @orange;
    padding: 10px 10px;
    color: black;
    transition: all 0.2s ease-in-out;
    border-radius: 5px;
    }
    nav a:hover,
    {
    color: white;
    background: @orange;
    box-shadow: 1px 1px 10px 10px rgba(@lightblue, 0.1);
    }
    .accordion {
    background: #fff;
    box-shadow: 1px 1px 10px 5px rgba(@lightblue, 0.2);
    }
    .panel {
    color: #64656A;
    padding: 30px;
    border-top: 2px solid @orange;
    }
    .panel:first-child{
    border-top: none;
    }
    .panel:last-child{
    border-bottom: 2px solid @orange;
    }
    .panel-bar {
    display: flex;
    justify-content: space-between;
    h3{
    color: @blue;
    font-size: 20px;
    }
    }
    .panel-buttons button {
    cursor: pointer;
    background: @lightblue;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    padding: 5px;
    }
    .hide-btn {
    display: none;
    }


    .panel-content {
    height:0;
    opacity:0;
    margin-top: 15px;
    transition: 1s;
    }
    .toggle-on {
    height:100px;
    opacity:1;
    transition:1s;
    display: block;
    }