Scribd
Upload
174 views

Css Microproject f1 PDF

MicroProject

Uploaded by

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

Css Microproject f1 PDF

MicroProject

Uploaded by

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

lOMoARcPSD|45953798

CSS Microproject F1 - pdf

bachelors of computer application (Trinity Institute of Professional Studies)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by Himanshu Ahirrao ([email protected])
lOMoARcPSD|45953798

Computer Department

Program Name and Code: CO5I Academic Year : 2022-23


Course Name and Code: CSS(22519) Semester : Fifth

A STUDY ON

WORD COUNT USING HTML


MICRO PROJECT
Submitted in 2022 by the student

Sr Roll No Enrollment Seat No


. (Sem- Full name of Student No (Sem-V)
N V)
o
1 2331 SHINGADE RAHUL AMBADAS 2017340087

Under the Guidance of


Prof. Dolare N.M.
in

Three Years Diploma Programme in Engineering & Technology of Maharashtra State Board
of Technical Education, Mumbai (Autonomous)
ISO 9001:2008 (ISO/IEC-27001:2013)

at

1734 – TRINITY POLYTECHNIC PUNE

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

MAHARASHTRA STATE BOARD OF TECHNICAL


EDUCATION, MUMBAI

Certificate

This is to certify that Mr. /Ms.

Roll No: of Fifth Semesterof Diploma

Programme in Engineering & Technology at 1734 – Trinity Polytechnic Pune,has

completed the Micro Project satisfactorily in Subject in the academic

year2022-23 as per the MSBTE prescribed curriculum of I Scheme.

Place:Pune EnrollmentNo:

Date: / /2022 Exam. SeatNo:

ProjectGuide Head ofthe Department Principal

Seal of Institute

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Computer Department

INDEX

Sr No. Title Page No.

1. Abstract 04

2. Introduction 05

3. Source Code/Program 06

4. Output 15

5. Conclusion 17

6. References 18

Trinity Polytcchnic,Pune Page 3

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Abstract

The Many times word count needs to be done between different projects. In all these cases,
this type of JavaScript Word Counter will help you completely. In this tutorial, you will learn
how to create Word Counter JavaScript. A lot of times we show character limits or word
limits in different input boxes. For example, in the case of Twitter, there is a character limit.
Although I have shared a tutorial before where I have shown how to create a character limit
input box. This tutorial will show you how to count words and characters. That means you
will see both a project word and a character..

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Introduction

Below is a preview that will help you to know how this Word Counter javascript works.
Below you will find the required source code. To create this JavaScript Word Counter
project I first created an input box using HTML and created a display. The input box is
created using Textarea. Then I designed using CSS. After all, I have implemented this project
(word counter HTML code) with the help of JavaScript. I used the background-color blue of
a webpage. I made a box on top of it. At the top of the box is a display. This display is
divided into two parts. In the first part, you can see the information of Word Counter. In the
second part, the information of the character counter can be seen. These values will change
when I change something in the input box. This JavaScript Word Counter is very easy to
make. I created it with some amount of HTML and some amount of CSS. A little bit of
JavaScript has been used to make this counter project work.The background of this input area
is white and the text color is black. A shadow has been used around the box to create a
beautiful banner that will further highlight this Word Counter in JavaScript on the webpage.

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Source Code/Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Word Length Calcuator</title>
</head>
<body>
<h1>Type a word in the box</h1>
<input type="text" id="str">
<div id="output"></div>
<button id="btn"><h2>Click to calculate word
length</h2></button>
<script src="app.js"></script>
</body>
</html>
body{
background-color:#f7240c;
text-align: center;
}

input{
margin: 100px auto 100px;
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}

#output{

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

margin-top: 45px;
width: 100px;
background: lightgreen;
margin: 100px auto 100px;

#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:blue;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}

h1{

color: #000;
margin-top: 50px;
}
let button = document.getElementById('btn');

button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');

outputDiv.innerHTML = `<h1>${count}</h1>`
});

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Output

Inserting Value in Output:-

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Result:-

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

Conclusion

Word count.It’s a topic that receives a lot of coverage these days.Bloggers and content
marketers are always wondering what’s the ideal word count to shoot for.Should every single
piece be long form, or is it better to opt for shorter pieces?It’s a valid question and something
that I have researched extensively.The purpose of this post is to shed light on just how long
your blog articles should be.There’s one thing I always want to make clear regarding word
count.It only matters if the content is good.Word count is not a standalone ranking factor.
Word count only has merit if the content quality is high!You can produce a 10,000-word
article. But if the content and quality suck, then the article doesn’t deserve to get ranked. You
lose.Is word count important?Yes, it is, and that’s why I write about it often.But word count
is only important when coupled with super high quality.

Downloaded by Himanshu Ahirrao ([email protected])


lOMoARcPSD|45953798

References

 https://github.com/JS-Beginners/word-count-tool.git
 BOOKS:
Client Side Scripting Language(22519)

Downloaded by Himanshu Ahirrao ([email protected])

You might also like