Html sederhana, proyek javascript css

JavaScript (JS) adalah salah satu bahasa pemrograman paling populer yang digunakan di semua aplikasi web untuk validasi, merender konten dinamis, grafik dan peta interaktif, dan banyak lagi. Bersama dengan HTML dan CSS, JS memiliki kemampuan untuk membuat aplikasi web yang lengkap dan tangguh.  

JS memungkinkan pengguna untuk berinteraksi dengan elemen menarik halaman web. Tetapi jika Anda seorang pembuat kode pemula dengan pengalaman JS terbatas, dari mana Anda memulai?

Anda akan belajar paling baik dengan berlatih, di situlah proyek JavaScript dasar masuk. Dan jika Anda memerlukan bantuan untuk membuat ide proyek JavaScript, jangan khawatir; .  

Siap untuk berlatih proyek JavaScript?

Mengapa Proyek JavaScript?

JS adalah jantung dari aplikasi web apa pun. Pemahaman JS yang kuat mengambil banyak pilihan karir yang menantang dan menarik, termasuk pengembangan aplikasi seluler, pengembangan web dinamis, desain UI/UX, dan pengembangan full-stack. Karena interaktivitas bahasa yang tak ada habisnya, mudah untuk bersenang-senang dengan JavaScript

Jika Anda mengetahui dasar-dasar JavaScript, proyek adalah langkah Anda selanjutnya untuk menambahkan bintang ke resume Anda. Jika Anda tidak memiliki pengalaman pemrograman, Anda dapat membaca buku JS atau mengikuti kursus JavaScript dasar dan kembali ke proyek ini nanti. Jika Anda memahami HTML dan CSS, Anda akan memahami sebagian besar proyek JavaScript, karena kode sumbernya disediakan

Sebelum kita beralih ke proyek yang sebenarnya, inilah pengingat fitur penting JavaScript

• Digunakan di sisi klien dan sisi server untuk membuat konten web interaktif
• Sangat meningkatkan pengalaman pengguna dengan fungsionalitas dinamis
• Bahasa ringan dengan kemampuan berorientasi objek
• Bahasa yang ditafsirkan, terbuka, dan lintas platform
• Mulus terintegrasi dengan Java dan HTML

Anda dapat melakukan banyak hal dengan JavaScript, tetapi kami tidak ingin membuat Anda kewalahan. Untungnya, ada beberapa proyek pemula javascript untuk membuat kaki Anda basah.  

Kami akan memulai dengan baik dan lambat dengan proyek JavaScript ini dengan kode sumber sehingga Anda dapat memulai dengan mudah

1. Kalkulator JavaScript

Kalkulator adalah salah satu proyek JavaScript yang mudah di daftar kami. Kami akan menggunakan HTML dan CSS sederhana, dan membuat semua komponen fungsional menggunakan fungsi JavaScript dasar. Kami akan terus menggunakan HTML untuk menampilkan tombol dan menyempurnakan presentasi dengan CSS. Terakhir, kita perlu memastikan tombol menjalankan fungsi yang tepat menggunakan JavaScript.  

Fungsi utamanya adalah eval(), fungsi JS global yang memecahkan kode JS. Fungsi display() akan menampilkan angka yang dipilih pada layar kalkulator. Perhatikan bahwa program hanya akan berfungsi untuk acara mouse. Ini kode lengkapnya, dibagi menjadi bagian HTML, CSS, dan JS

HTML

  
  
  

    
    +
    -
    ×
    ÷

    7
    8
    9


    4
    5
    6


    1
    2
    3


    0
    .
    AC

    =

  

CSS

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.calculator {
  border: 1px solid #ccc;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.calculator-screen {
  width: 100%;
  font-size: 5rem;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  padding-right: 20px;
  padding-left: 10px;
}

button {
  height: 60px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-size: 2rem;
  color: #333;
  background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
  text-shadow: 0 1px rgba(255,255,255,.4);
}

button:hover {
  background-color: #eaeaea;
}

.operator {
  color: #337cac;
}

.all-clear {
  background-color: #f0595f;
  border-color: #b0353a;
  color: #fff;
}

.all-clear:hover {
  background-color: #f17377;
}

.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
  height: 100%;
  grid-area: 2 / 4 / 6 / 5;
}

.equal-sign:hover {
  background-color: #4e9ed4;
}

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

JavaScript

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function inputDigit(digit) {
  const { displayValue, waitingForSecondOperand } = calculator;

  if (waitingForSecondOperand === true) {
    calculator.displayValue = digit;
    calculator.waitingForSecondOperand = false;
  } else {
    calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
  }
}

function inputDecimal(dot) {
  if (calculator.waitingForSecondOperand === true) {
  	calculator.displayValue = "0."
    calculator.waitingForSecondOperand = false;
    return
  }

  if (!calculator.displayValue.includes(dot)) {
    calculator.displayValue += dot;
  }
}

function handleOperator(nextOperator) {
  const { firstOperand, displayValue, operator } = calculator
  const inputValue = parseFloat(displayValue);
  
  if (operator && calculator.waitingForSecondOperand)  {
    calculator.operator = nextOperator;
    return;
  }


  if (firstOperand == null && !isNaN(inputValue)) {
    calculator.firstOperand = inputValue;
  } else if (operator) {
    const result = calculate(firstOperand, inputValue, operator);

    calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
    calculator.firstOperand = result;
  }

  calculator.waitingForSecondOperand = true;
  calculator.operator = nextOperator;
}

function calculate(firstOperand, secondOperand, operator) {
  if (operator === '+') {
    return firstOperand + secondOperand;
  } else if (operator === '-') {
    return firstOperand - secondOperand;
  } else if (operator === '*') {
    return firstOperand * secondOperand;
  } else if (operator === '/') {
    return firstOperand / secondOperand;
  }

  return secondOperand;
}

function resetCalculator() {
  calculator.displayValue = '0';
  calculator.firstOperand = null;
  calculator.waitingForSecondOperand = false;
  calculator.operator = null;
}

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  display.value = calculator.displayValue;
}

updateDisplay();

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', event => {
  const { target } = event;
  const { value } = target;
  if (!target.matches('button')) {
    return;
  }

  switch (value) {
    case '+':
    case '-':
    case '*':
    case '/':
    case '=':
      handleOperator(value);
      break;
    case '.':
      inputDecimal(value);
      break;
    case 'all-clear':
      resetCalculator();
      break;
    default:
      if (Number.isInteger(parseFloat(value))) {
        inputDigit(value);
      }
  }

  updateDisplay();
});

2. Permainan Hangman

Hangman adalah game terkenal, dan salah satu proyek JS sederhana kami. Anda dapat mengembangkannya dalam sekejap menggunakan JavaScript, HTML, dan CSS. Perhatikan bahwa fungsi utama didefinisikan menggunakan JS. HTML adalah untuk tampilan, dan CSS berfungsi mempercantik konten.  

Banyak metode yang didefinisikan dalam kode JS, jadi ini mungkin tampak agak rumit, tetapi Anda akan menyadari bahwa ini sederhana setelah Anda membaca kodenya secara menyeluruh. Anda juga dapat menjalankan kode dan melihat eksekusi baris demi baris

Periksa kode dan eksekusi

3. Permainan Tic Tac Toe

JavaScript mempermudah pengembangan game Tic-Tac-Toe sendiri. Anda dapat melihat seluruh kode di sini, dan menjelaskan cara membuat 3x3 tic-tac-toe langkah demi langkah. Kemudian, Anda nantinya dapat memperluas ke NxN untuk latihan dan pengetahuan Anda sendiri. HTML dan CSS untuk proyek ini cukup sederhana. Penulis pertama-tama mulai dengan pseudocode dan kemudian menjelaskan setiap fungsi secara individual

4. Aplikasi Cuaca JavaScript

Aplikasi cuaca juga merupakan proyek JavaScript yang populer. Setelah Anda mengubah nama lokasi dalam proyek ini, tampilan cuaca langsung berubah tanpa penyegaran halaman. UI-nya juga cukup ramping.  

Perhatikan bahwa sebagian besar aplikasi cuaca menggunakan API yang mendapatkan data cuaca. Kami akan menggunakan API yang populer dan paling umum, OpenWeatherMap.  

Lihat video Youtube ini yang menjelaskan kode dan fungsi aplikasi cuaca secara mendetail. Ada tiga file, seperti biasa. indeks. html, utama. js, dan utama. css. Meskipun Anda dapat memasukkan semua kode dalam satu file (HTML), akan lebih mudah untuk mempertahankan file terpisah.  

Kursus JavaScript yang Direkomendasikan

Kursus JavaScript Lengkap 2023. Dari Nol ke Pakar

5. Acara Musik JavaScript

Di sini, kami akan memperkenalkan Anda kepada pendengar acara yang akan bertindak pada acara keyboard. Misalnya, suatu peristiwa akan terjadi jika tombol 'S' ditekan. Masing-masing akan memiliki kode dan tindakan yang berbeda.  

Selain pendengar acara, kami juga akan belajar cara menambahkan dan memutar file audio. Perhatikan bahwa kami telah menambahkan CSS yang sangat mendasar, karena fokusnya di sini adalah pada JavaScript. Anda harus mengimpor suara dan gambar latar belakang Anda sendiri agar program dapat bekerja sepenuhnya

 
 
 KeyBoard Music


 

   

     A
   
   

     S
   
   

     D
   
   

     F
   
   

     G
   
   

     H
   
   

     J
   
   

     K
   
   

     L
   

 

 
 
 
 
 
 
 
 
 

6. Validasi Formulir JavaScript

Validasi formulir adalah aspek yang berguna dan digunakan oleh banyak situs web untuk validasi sisi klien atas informasi pengguna, seperti detail kartu dan alamat. Misalnya, jika ada nama bidang yang wajib diisi, pengguna dapat mengetik angka, mengosongkan bidang, atau mengetik satu huruf saja. JS dapat memvalidasi informasi ini.  

Proyek di bawah ini melibatkan validasi formulir sederhana. Tentu saja, proyek tersebut juga membutuhkan elemen HTML. Kami belum melakukan gaya ekstensif apa pun, hanya menyertakan elemen dasar dalam HTML itu sendiri.  

Berikut adalah kode lengkap dari formulir sederhana dengan validasi dasar

  
     Form Validation
        
  
  
     
   	 USER REGISTRATION
        
           
              Name
              
           
           
              E-mail
              
           
           
              Phone Number
              
           
           
              Subject
              
                 
                    
                    
                    
                    
                    
                 
              
           
        
        
  

     
  

7. Tampilan Detail Foto JavaScript

Di sini, kami akan menampilkan beberapa gambar di halaman web. Setelah pengguna mengarahkan kursor ke gambar, detail lebih lanjut akan muncul. Anda dapat mengunduh gambar dari mana saja atau menggunakan yang sudah Anda miliki.  

Sekali lagi, kami telah menggunakan HTML dan CSS dasar bersama dengan JS. Yang terakhir melakukan sebagian besar pekerjaan. Anda akan mempelajari bagaimana peristiwa mouse hover (over and out) bekerja melalui proyek ini

 
   My Sun Sign Infos
 
 
 
 
   

   
Hover over a sunsign image to display details.

   

   

   

   

   

 

Untuk membuat proyek ini lebih kompleks, cobalah proyek slideshow ini dari W3Schools. Anda dapat mengubah peristiwa onClick menjadi peristiwa onmousehover dan onmouseout, dalam hal ini, gambar akan berubah setelah pengguna mengarahkan kursor ke gambar

8. Bangun Halaman Arahan Interaktif

Proyek ini melibatkan pembuatan laman landas dinamis yang menyimpan nama dan teks Anda yang ditulis di penyimpanan lokal, dan menampilkan gambar dan pesan ucapan yang sesuai berdasarkan waktu hari itu. Video YouTube ini akan membantu Anda mempelajari tentang komponen JS proyek ini

Sejauh ini, kami telah menjalankan proyek kecil dengan JS, HTML, dan CSS murni. Di sini, penulis membuat keranjang belanja lengkap untuk pemenuhan pesanan, dan proyek tersebut juga menggunakan jQuery.  

Anda dapat menggunakan ini sebagai kesempatan untuk mempelajari konsep penting jQuery. Ini akan menjadi proyek yang bagus untuk dibangun karena situs web belanja sangat populer saat ini, karena belanja digital telah menjadi sangat populer. Proyek ini akan memakan waktu, tetapi itu sangat berharga

Di sini, halaman tidak akan dimuat ulang saat menavigasi tautan samping, tetapi kontennya akan berubah. Sekali lagi, kami akan menggunakan eventListeners untuk mengubah tampilan dari satu tautan ke tautan lainnya. Lihat kode dan penjelasannya di video YouTube ini

11. Editor Kode Browser JavaScript

Meskipun Anda sudah memiliki banyak pilihan editor kode JS, selalu menyenangkan bisa membuatnya sendiri. JS memungkinkan Anda untuk membuat editor kode dalam browser, yang merupakan inti dari proyek ini. Itu menggunakan beberapa metode JS yang berguna - dan bahkan fitur penyorotan sintaks

Kode sumber untuk proyek ini tersedia di sini

Aplikasi obrolan relatif mudah dibuat dan Anda dapat membuatnya sendiri menggunakan JavaScript. Proyek ini menggunakan React dan Node. js, jadi mungkin sedikit mengintimidasi. Namun, ini cara yang baik untuk mengotori tangan Anda dan mempelajari cara bekerja dengan alat yang tak ternilai ini.  

Anda dapat melihat kode sumber di GitHub

13. Game Platform 2D

Game adalah cara yang bagus dan menyenangkan untuk mempelajari JS. Itu sebabnya Anda akan melihat begitu banyak proyek seputar game. Proyek ini mengajarkan Anda cara membuat game platformer 2D — semuanya menggunakan JS, HTML, dan CSS. Anda akan menggunakan konsep OOP dan API, keduanya merupakan keterampilan praktis yang harus dimiliki

Lihat kode sumbernya di sini

14. Aplikasi berbagi foto

Semua orang tahu Instagram. Ini memiliki banyak fitur, tetapi pada dasarnya, ini adalah aplikasi berbagi foto. Anda dapat membuat versi serupa tetapi berskala lebih kecil menggunakan JS. Ini adalah proyek yang besar dan kuat dan Anda akan menemukan diri Anda menggunakan React, Node. js, dan Postgres, antara lain

Lihatlah kode sumber di sini

15. Aplikasi Berbagi File

Mempelajari cara berbagi file adalah keterampilan lain yang berguna untuk dimiliki. Anda akan menggunakan Virgil Crypto Library di JavaScript untuk membuat aplikasi ini. Aman, dan Anda akan dapat mengunduh, mendekripsi, dan melihat file media terenkripsi

Lihatlah kode sumber di sini

Mulai Coding Proyek JavaScript hari ini

Kami telah membahas hanya 15 dari lautan proyek JavaScript yang keren. Namun, proyek sampel JavaScript ini dapat menanamkan banyak nilai ke dalam portofolio Anda dan mencakup hampir semua konsep penting yang perlu Anda ketahui tentang JS.  

Gatal untuk mempelajari lebih lanjut tentang JavaScript? . Dan begitu Anda merasa percaya diri?

Jelajahi Tutorial JavaScript

Pertanyaan yang Sering Diajukan

1. Proyek Apa yang Dapat Saya Lakukan dengan JavaScript?

Anda memiliki beberapa pilihan untuk proyek pengkodean dalam JavaScript. Untuk pemula, proyek seperti kalkulator dan yang memiliki pendengar acara mungkin merupakan tempat yang baik untuk memulai. Periksa daftar di atas untuk mempelajari lebih lanjut

2. Bagaimana Saya Memulai Proyek JavaScript?

Anda mulai dengan pengkodean. Langkah pertama yang populer adalah proyek kalkulator JavaScript. Lihatlah daftar proyek JavaScript di atas untuk memulai

3. Di Mana Saya Bisa Mulai Belajar JavaScript untuk Pemula?

Anda dapat mulai mempelajari JavaScript melalui sumber daya di Hackr. io, seperti sertifikasi JavaScript terbaik. Internet memiliki beragam sumber daya yang menunggu untuk Anda gunakan. Itu termasuk proyek JavaScript sederhana untuk segera dimulai.  

4. Di mana Saya Bisa Mendapatkan Proyek JavaScript?

Anda dapat melihat proyek JavaScript pemula di atas untuk beberapa proyek bagus. Anda juga dapat menelusuri web untuk ide proyek yang lebih sederhana

Proyek apa yang dapat saya lakukan dengan HTML CSS dan JavaScript?

Bagaimana cara membuat situs web sederhana menggunakan HTML CSS dan JavaScript?

Bisakah saya mendapatkan pekerjaan dengan HTML dasar CSS dan JavaScript?

Apa proyek JavaScript termudah?