Rabu, 21 September 2022

Quiz-1

     Pada minggu ke empat diadakan quiz pertama, dengan perintah untuk membuat formulir pendaftaran pasien baru. 

Berikut adalah tampilannya :



Berikut adalah link repo : Repo







on Tidak ada komentar:

Rabu, 14 September 2022

Tugas 3 - JavaScript

    Pada minggu ketiga diberkan tugas untuk membuat tampilan signup form dan login form pada web. Berikut adalah tampilannya :

Login Form :


Sign Up Form 


Berikut adalah source code nya :

- Login Form 

<!DOCTYPE html>
<head>
<title> Login Form </title>
</head>
<body>
<h3> LOGIN </h3>
<formform="Login_form" onsubmit="submit_form()" {">
<h4> USERNAME </h4>
<input type="text" placeholder="Enter your email id" />
<h4> PASSWORD </h4>
<input type="password" placeholder="Enter your password" /><br><br>
<input type="submit" values="Login" />
<input type="button" values="SignUp" onClick="create()" />
</formform>
<script type="text/javascript">
function submit_form(){
alert("Login successfully");
}
function create(){
window.location = "signup.html";
}
</script>
</body>
view raw login.html hosted with ❤ by GitHub

-Sign Up Form

<!DOCTYPE html>
<html lang="en">
<head>
<title>SignUp Page</title>
</head>
<body align="center">
<h1> CREATE YOUR ACCOUNT</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr><td> Name </td>
<td><input type="text" placeholder="Enter your name" id="n1">
</td></tr>
<tr><td> Email </td>
<td><input type="text" placeholder="Enter your email id" id="e1">
</td></tr>
<tr><td> Set Password </td>
<td><input type="password" placeholder="Set a password" id="p1">
</td></tr>
<tr><td> Confirm Password </td>
<td><input type="password" placeholder="Confirm your password" id="p2">
</td></tr>
<tr><td>
<input type="submit" value="Create" onClick="create_account()"/>
</td></tr>
</table>
<script type="text/javascript">
function create_account(){
var n = document.getElementById("n1").value;
var e = document.getElementById("e1").value;
var p = document.getElementById("p1").value;
var cp = document.getElementById("p1").value;
var letters = /^[A-Za-z]+$/;
var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2, 4})+$/;
if(n==''||e==''||p==''||cp==''){
alert("Enter each details correctly");
}else if(!letters.test(n)){
alert('Name is incorrect must contain alphabets only');
}else if(!email_val.test(e)){
alert('Invalid email format please enter valid email id');
}else if(p!=cp){
alert("Password not matching");
}else if(document.getElementById("p1").value.length > 12){
alert("Password maximum length is 12");
}else if(document.getElementById("p1").value.length < 6){
alert("Password minimun length is 6");
}else{
alert("Your account has been created succesfully... Redirecting to JavaTpoint.com");
window.location="https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
view raw signup.html hosted with ❤ by GitHub
on Tidak ada komentar:

Rabu, 07 September 2022

Tugas 2 Pemrograman Web - Belajar Membuat Layout dengan HTML dan CSS

     Pada minggu kedua diberkan tugas untuk belajar membuat layout dengan HTML dan CSS, berikut adalah tampilannya,

Berikut adalah source code HTML nya : 


<!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">
<title>Belajar Membuat Layout dengan HTML dan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="jarak">
<h2>Berita Dunia KPOP Hari ini!</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!--kiri-->
<div class="kiri">
<!--blog-->
<div class="border">
<div class="jarak">
<h3>5 Artis Kpop Dengan Kekayaan Terbanyak, Ada yang Tembus Triliunan</h3>
<p><b>Suara.com </b>- Seperti diketahui, KPop menjadi salah satu industri yang banyak digemari dan diminati masyarakat. industri satu ini mendapat banyak atensi dari masyarakat dunia seperti BTS, Blackpink, Bigbang, Psy dan berbagai lainnya.</p>
<button class="btn">Read More...</button>
</div>
</div>
<div class="border">
<div class="jarak">
<h3>Artis Kpop di Spotify Chart Pekan Ini: BTS, BLACKPINK hingga TWICE</h3>
<p><b>Selebtek.suara.com </b> - Selasa (6/9/2022) Spotify Chart merilis daftar lagu dan album dari artis Korea Selatan yang berhasil masuk di chart mereka untuk minggu ini.
Dilansir dari charts.spotify.com berikut daftar lengkapnya:
Spotify TOP 200 Global Song:</p>
<button class="btn">Read More...</button>
</div>
</div>
</div>
<!--kanan-->
<div class="kanan">
<div class="jarak">
<h3>CATEGORY</h3>
<hr>
<p><a href="#" class="undecor">Song</a></p>
<p><a href="#" class="undecor">Drama</a></p>
<p><a href="#" class="undecor">Actor</a></p>
<p><a href="#" class="undecor">Food</a></p>
<p><a href="#" class="undecor">Idol</a></p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyright 2022 codebareng all reserved</p>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Berikut adalah source code untuk CSS nya : 

body{
background: #f3f3f3;
color: #333;
width: 100%;
font-family: sans-serif;
margin:0 auto;
}
.header{
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #A66CFF;
color: #fff;
}
.content{
width: 90%;
margin: auto;
height: 420px;
padding: 0.1px;
background: #fff;
color: #333;
}
.kiri{
width: 70%;
float: left;
margin: auto;
height: 420px;
background: #fff;
}
.kanan{
width: 30%;
float: left;
margin: auto;
height: 420px;
background: #fff;
}
.border{
border: 2px solid #A66CFF;
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.undercor{
text-decoration: none;
}
.footer{
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: #9C9EFE;
color:#fff
}
.menu{
background-color: #9C9EFE;
height: 50px;
line-height: 50px;
position: relative;
width: 90%;
margin:0 auto;
padding:0 auto;
}
.jarak{
padding:0 2pc;
}
.menu ul{
list-style: none;
display: flex;
flex-direction: row;
}
.menu ul li a{
float: left;
width: 70px;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
}
.menu ul li a:hover{
background-color:
#AFB4FF;
display: block;
}
view raw style.css hosted with ❤ by GitHub
on Tidak ada komentar:

Selasa, 06 September 2022

Tugas 1 Pemrograman Web - Membuat CV menggunakan HTML dan CSS

     Di Minggu pertama perkuliahan diberikan tugas yaitu membuat CV pada website menggunakan HTML dan CSS. HTML sendiri merupakan  suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar. Sedangkan CSS merupakan tools pelengkap HTML yang digunakan untuk mengubah tampilan suatu situs.




on Tidak ada komentar:
Langganan: Postingan (Atom)