코드 100일 중 15-16일차

6230 단어 programmingjavascriptwebdev
나는 내가 원하는 것보다 훨씬 더 느렸다. 내가 더 잘할게. HTML, Javascript 및 CSS로 송장 작성기 앱을 만들었습니다.
인보이스 작성기 앱은 세차, 잔디 깎기, 잡초 뽑기 등의 작업을 클릭하면 버튼에 가격이 추가됩니다.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="invoice.css" rel="stylesheet">
    <title>Invoice Creator App</title>
</head>
<body>

        <header>
            <h2>Invoice Creator</h2>
            <p class="heading">Thanks for choosing Dynax Solutions, LLC!</p>
        </header>

        <section>
            <div class ="invoicebtns ">
                <button class="button" id="billwash">Wash Car: $10</button>
                <button class="button" id ="mow">Mow Lawn: $20</button>
                <button class="button" id ="billpull">Pull Weeds: $30</button>
            </div>
        </section>
      <section>
          <div class="task">
              <p>TASK</p>
              <p>TOTAL</p>
          </div>
          <div class ="bill">
              <p id ="washCar"></p>
              <p id ="washCarPrice"></p>
          </div>
          <div class ="bill">
            <p id ="mowLawn"></p>
            <p id ="mowLawnPrice"></p>
          </div>
          <div class ="bill">
            <p id ="pullWeeds"></p>
            <p id ="pullWeedsPrice"></p>
          </div>
          <div class ="bar"></div>

      <div class="task">
        <p>NOTES</p>
        <p>TOTAL  AMOUNT</p>
    </div>
    <div class="task">
        <p id ="typeofcollection"></p>
        <p id="totalamount"><b>$0</b></p>
    </div>
    <button class="sendbtn"><i class="fa fa-envelope" aria-hidden="true"></i> Send Invoice</button>
    </section> 

    <script src ="invoice.js"></script>
</body>
</html>


CSS 조각

html,
body {
  margin: 0;
  padding: 0;


  color: black;
  font-family: Georgia, "Times New Roman", Times, serif;

  font-size: 16px;
}

header{
  background-color:#D5D4D8 ;

  text-align: center;
}
h2{
  margin-top:0;
  margin-bottom:1%;

  font-size: 50px;
  padding:50px 0 10px 0;
}
.heading
{

    font-size: 30px;
    padding-bottom:20px;
}
.invoicebtns
{   margin-top:12%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;

}
.button {
    background-color: #FFFFFF; /* white */
    border: 1px solid #D5D4D8;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;

    font-size: 16px;
    border-radius:12px;
  }
  .button:hover {
    background-color: #D5D4D8;
  }
    section{
        margin-left: 10%;
        width:80%;
    }

  .task{
      margin-top: 2%;
      display:flex;

    color:darkgrey;


    justify-content: space-between;

    font-size: larger;
  }
  .bill
  {
      margin-top:1%;
      display:flex;
      color:black;

      justify-content: space-between;
    font-weight: bold;

  }
  .bar{


      border-top: 1px solid  #D5D4D8;
  }
 .sendbtn{
    background-color: #3770ED; /* blue*/
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 4%;
    width:90%;
 }


자바스크립트 스니펫

// This is for the object creation of the invoice
let invoice =[
    { 
        task:"Wash Car",
        bill: 10
    },
    {
        task: "Mow Lawn",
        bill: 20
    },
    {
        task: "Pull Weeds",
        bill:30
    }
]
let totalbill =[]
//fetching the value from the buton using addeventlistener
const carBtn = document.getElementById('billwash')
let  mowBtn = document.getElementById('mow')
const pullBtn = document.getElementById('billpull')
let washCar =document.getElementById('washCar')
let washCarPrice =document.getElementById('washCarPrice')
let mowLawn =document.getElementById('mowLawn')
let mowLawnPrice =document.getElementById('mowLawnPrice')
let totalamount =document.getElementById('totalamount')

let pullWeeds=document.getElementById('pullWeeds')
let pullWeedsPrice =document.getElementById('pullWeedsPrice')


 carBtn.addEventListener("click",function(){
     totalbill.push(invoice[0].bill)
     washCar.innerHTML =invoice[0].task
     washCarPrice.innerHTML =`$${invoice[0].bill}`
     carBtn.disabled =true
     totalnotes()

})

mowBtn.addEventListener("click", function(){
    totalbill.push(invoice[1].bill)
    mowLawn.innerHTML =invoice[1].task
    mowLawnPrice.innerHTML =`$${invoice[1].bill}`
    mowBtn.disabled=true
    totalnotes()
})

pullBtn .addEventListener("click",function(){
    totalbill.push(invoice[2].bill)
    pullWeeds.innerHTML =invoice[2].task
    pullWeedsPrice.innerHTML =`$${invoice[2].bill}`
    pullBtn.disabled =true
    totalnotes()
})
function totalnotes(){
    let sum = 0;

    for (let i = 0; i < totalbill.length; i++) {
     sum += totalbill[i];
     totalamount.textContent=`$${sum}`;

}
}
인증을 사용하시겠습니까?
오픈 소스 모험: 에피소드 43: SolidJS

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage