Dance Website Using Pug and Node js(For Backened)

Dance Website

Pug code ( generally pug is a template engine used in place of html , because it make the scripting easier as compared to html)

base.pug;

doctype html

html

  head

    title Pratik Dance Website

    block scripts

      script(src='../static/script.js')

    block style

      style

        include ../static/style.css

  body

    nav#navbar

        #logo

            img(src="/static/2.png", alt="")

        ul

            li #[a(href='/') Home]

            li #[a(href='/') About Us ]

            li #[a(href='/') Services]

            li #[a(href='/contact') Contact Info]

    block content

    block foot

      home.pug:

extends base.pug

block scripts

  script(src='../static/script.js')

block style

  style

    include ../static/style.css 

    include ../static/response.css 

block content

    

    section#introSection

        div Welcome to My Dance Academy

        .small Eat sleep Dance Repeat

    

    section#missionSection

        h2 Our Mission

        .mission

            .card

                h3 Dance perfection

                .card-box

                    .card-img

                        img(src="/static/card1.jpg", alt="")

                        p we will train in your best way

            .card

                h3 Removing your best dancer

                .card-box

                    .card-img

                        img(src="/static/logo1.png", alt="")

                        p we will train in your best way

            .card

                h3 Versatile Dancer

                .card-box

                    .card-img

                        img(src="/static/card2.png", alt="")

                        p we will train in your best way

    

    section#sponsorSection

        h2 Our Sponsors

        #sponsors

            img(src="/static/logo.jpg", alt="")

            img(src="/static/logo2.png", alt="")

            img(src="/static/logo3.jpg", alt="")

    footer#footer

        | this is footer

contact.pug:

extends base.pug

block scripts

  script(src='../static/script.js')

block style

  style

    include ../static/contact.css

    include ../static/style.css 

block content

  h3 Contact Us

  form(action="/contact", method="post")

    input(type="text", class="myInput",name="name",placeholder="enter your name")

    input(type="number", class="myInput",name="number",placeholder="enter your number")

    input(type="number", class="myInput",name="age",placeholder="enter your age")

    textarea(name="address",class="myInput", cols="30", rows="10",placeholder="Give your description")

    button(class="btn")

      | Submit

style.css

#navbar ul{

    display: flex;

    flex-direction: row;

    justify-content: center;

}

#navbar li{

    list-style: none;

}

#logo{

    display: inline-block;

    /* align-items: center; */

    height: 40px;

}

#navbar #logo img{

    /* display: flex; */

    /* align-items: center; */

    height: 40px

}

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap');

*{

    margin: 0px;

    box-sizing: border-box;

    padding: 0px;

    font-family: 'Baloo Bhaina 2', cursive;

}

#navbar{

    display:flex ;

    background-color: rgb(230, 46, 46);

    padding: 10px;

    font-size: 22px;

    font-family: 'Baloo Bhaina 2', cursive;

    position: sticky;

    

    

}

#navbar li a{

    text-decoration: none;

    padding: 10px 30px;

    color: white;

}

#navbar li a:hover{

    color: black;

}

#introSection{

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Baloo Bhaina 2', cursive;

    background: url('/static/dance2.jpg') center center/cover no-repeat;

    height: 600px;

    /* background-color: red; */

    color: white;

    font-size: 35px;

    flex-direction: column;

    padding-bottom: 40px;

}

.small{

    font-size: 1.3rem;

}

#missionSection{

    height: 330px;

    display: block;

    width: 100%;

    margin: auto;

    /* display: flex;

    justify-content: center;

    align-items: center; */

}

#missionSection .mission{

    height: 300px;

    /* width: 80%; */

    display: flex;

    justify-content: center;

    align-items: center;

}

#missionSection h2{

    text-align: center;

    padding: 5px;

}

.card{

    border: 2px solid black;

    border-radius: 15px;

    width: 30%;

    height: 70%;

    margin: 10px;

    display: inline-block;

    background-color: lemonchiffon;

}

.card h3{

    text-align: center;

    /* text-align: center; */

    margin: 10px;

}

.card-box{

    display: flex;

    justify-content: center;

    align-items: center;

    height: inherit;

}

.card-img{

    height: 100px

    

}

.card-img img{

    height: 100px

}

#sponsorSection{

    height: 300px;

    background-color: white;

    

}

#sponsorSection h2{

    text-align: center;

    padding: 5px;

    background-color: wheat;

}

#sponsors{

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 20px;

}

#sponsors img{

    margin: 20px;

    padding: 1px;

    height: 150px;

    border: 2px solid;

    border-radius: 10px;

}

#footer{

    height: 100px;

    background-color: black;

}

Notes Taking Website(Magic Notes)

HML CODE AND DESIGN USING BOOTSTRAP

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">Magic Notes</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        Dropdown

                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                        <a class="dropdown-item" href="#">Action</a>

                        <a class="dropdown-item" href="#">Another action</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item" href="#">Something else here</a>

                    </div>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

                </li>

            </ul>

            <form class="form-inline my-2 my-lg-0">

                <input class="form-control mr-sm-2" id="searchtxt" type="search" placeholder="Search" aria-label="Search">

                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

            </form>

        </div>

    </nav>

    <div class="container my-3">

        <h1>Welcome to magic Notes</h1>

        <div class="card" >

            <!-- <img src="..." class="card-img-top" alt="..."> -->

            <div class="card-body">

              <h5 class="card-title">Add a Note </h5>

              <!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->

              <div class="form-group">

               <h6> Note Title:</h6> <input type="text" id="title" class="form-control">

                <!-- <label for="exampleFormControlTextarea1">Add a note</label> -->

                <textarea class="form-control" id="addtxt" rows="3"></textarea>

              </div>

              <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->

              <button class="btn btn-primary" id="addbtn" >Add Note</button>

            </div>

          </div>

          <h2>Your Notes</h2>

          <hr>

          <div id="notes" class="row container-fluid">

         

  

            

          </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"

        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"

        crossorigin="anonymous"></script>

    <script src="app.js"></script>

</body>

</html>

App.js fie

console.log('welcome to magic notes');

showNotes();

// if user adds a note

let addbtn = document.getElementById('addbtn');

addbtn.addEventListener('click',function(e){

    let addtitle = document.getElementById('title');

    let addtxt = document.getElementById('addtxt');

    let notes = localStorage.getItem('notes')

    if(notes == null){

        notesObj = [];

    }

    else{

        notesObj = JSON.parse(notes);

    }

    let myObj = {

        title: addtitle.value,

        notes :addtxt.value

    }

    notesObj.push(myObj);

    localStorage.setItem("notes", JSON.stringify(notesObj));

    addtxt.value = " ";

    addtitle.value = " ";

    console.log(notesObj);

    showNotes();

})

function showNotes(){

    let notes = localStorage.getItem('notes');

    if(notes == null){

        notesObj = [];

    }

    else{

        notesObj = JSON.parse(notes);

    }

    let html = "";

    notesObj.forEach(function(element,index)  {

        html += `

        <div class="Card my-2 mx-2" style="width: 18rem;">

        <!-- <img src="..." class="card-img-top" alt="..."> -->

        <div class="card-body">

          <h5 class="card-title">${element.title}</h5>

          <p class="card-text">${element.notes}</p>

          <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>

        </div>

    </div> 

        

        `

   

    

        

    });

    let notesElm = document.getElementById('notes');

    if(notesObj.length != 0){

        notesElm.innerHTML = html;

    }

    else{

        notesElm.innerHTML = 'Nothing to show here'

    }

        

    

}

function deleteNote(index){

    console.log('i am deleting',index);

    let notes = localStorage.getItem('notes');

    if(notes == null){

        notesObj = [];

        

    }

    else{

        notesObj = JSON.parse(notes);

    }

    notesObj.splice(index,1);

    

    localStorage.setItem("notes", JSON.stringify(notesObj));

    showNotes();

}

let searchtxt = document.getElementById('searchtxt');

searchtxt.addEventListener('input',function(){

    console.log('input event fired');

    let inpVal = searchtxt.value.toLowerCase();

    let noteCards = document.getElementsByClassName('Card');

    Array.from(noteCards).forEach(function(element){

        let cardtxt = element.getElementsByTagName("p")[0].innerText;

        console.log(cardtxt);

        if(cardtxt.includes(inpVal)){

            element.style.display = "block";

        }

        else{

            element.style.display = "none";

        }

    })

})