Scribd
Upload
3 views

web code

The document contains an HTML and CSS code base for a web application that allows users to generate a funny duck nickname based on their real name. It includes input fields for the user's name and duck nickname, a section for displaying duck thumbnails, and a summary card for the selected duck. The CSS styles the layout, ensuring a responsive design with clear visual feedback for user interactions.

Uploaded by

bpereranilu607839
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

web code

The document contains an HTML and CSS code base for a web application that allows users to generate a funny duck nickname based on their real name. It includes input fields for the user's name and duck nickname, a section for displaying duck thumbnails, and a summary card for the selected duck. The CSS styles the layout, ensuring a responsive design with clear visual feedback for user interactions.

Uploaded by

bpereranilu607839
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML code base

<!DOCTYPE html>
<head>
</head>
<body>
<main class="container">
<section class="input-section">
<label for="realName">Your Name</label>
<input type="text" id="realName">

<label for="">Duck Nickname</label>


<input type="text" id="duckNickname" placeholder="Enter duck nickname">
<span id="nicknameFeedback">Nickname must be 4+ characters, no spaces, and not the same as your real name</span>

<button id="generateNickname">Generate Funny Name</button>

<div class="duck-thumbnails">
<img src="duck1.jpg" class="duck-thumb" id="duck1">
<img src="duck2.jpg" class="duck-thumb" id="duck2">
<img src="duck3.jpg" class="duck-thumb" id="duck3">
</div>

<button id="confirmSelection">Confirm</button>
</section>

<section class="summary-card">
<h1>Summary card</h1>
<div class="selected-duck-container">
<img id="selectedDuck" class="selected-duck" src="duck.jpg" alt="Selected Duck">
</div>
<input type="text" id="finalNickname" readonly placeholder="combined name">
</section>
</main>
</body>
</html>

2
CSS code base
/* Mock Lab Practical */

.student-info {
margin-bottom: 20px;
padding: 10px;
background-color: #eef0f4;
border-radius: 8px;
font-size: 0.95em;
text-align: left;
}

/* Input section floated left */


.input-section {
float: left;
width: 55%;
padding-right: 20px;
}

.input-section label {
display: block;
margin-top: 15px;
margin-bottom: 5px;
font-weight: bold;
}

.input-section input[type="text"] {
width: 95%;
padding: 8px;
margin-bottom: 5px;
}

#nicknameFeedback {
background-color: rgb(231, 231, 231);
border-radius: 5px;
font-size: 0.9em;
padding: 5px;
margin-bottom: 20px;
height: 40px;
line-height: 20px; /* Matches the height for vertical centering */
text-align: center; /* Horizontal centering */
}

/* Thumbnail layout */
.duck-thumbnails {
margin: 20px 0;
height: 70px;
}

.duck-thumb {
border: 2px solid transparent;
border-radius: 10px;
margin-right: 10px;
}

3
/* Buttons floated to the right */
#generateNickname,
#confirmSelection {
padding: 8px 12px;
cursor: pointer;
float: right;
margin-left: 10px;
margin-top: 10px;
clear: both;
}

/* Summary card floated right */


.summary-card {
float: right;
width: 40%;
border-left: 2px solid #ddd;
padding-left: 20px;
}

.summary-card h1 {
text-align: center;
}

.selected-duck-container {
width: 120px;
height: 120px;
margin: 20px auto;
border: 2px solid #999;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
text-align: center;
}

.selected-duck-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

#finalNickname {
padding: 8px;
width: 80%;
margin: 0 auto;
display: block;
text-align: center;
}

.selected {
border-color: green;
}

You might also like