Scribd
Upload
3 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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