Skip to content
Advertisements

A simple program that separates numbers and words

A simple program that separates numbers and words

HTML CODE:

<div class="box">
        <small>Enter a number or word </small><br>
        <input type="text" id="variable" />
        <input type="button" onclick="add();" value="add" />
        <input type="button" onclick="show();" value="show" /><br>
        <div class="sdata" id="numbers"></div>
        <div class="sdata" id="words"></div>
    </div>

CSS CODE:

        body{
            padding:0;
            margin:0;
            font-family:Verdana
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%)
        }
        small{
            font-weight:bold;
            margin-left:40px;
        }
        input[type="text"]{
            border:2px solid #262626;
            width:150px;
            height:20px;
            outline:none;
            margin-top:15px;
        }
        input[type="button"]{
            border:2px solid #262626;
            width:60px;
            height:25px;
            background:#000;
            color:#fff;
            cursor:pointer;
            transition:.5s;
            font-weight:bold;
        }
        input[type="button"]:hover{
            color:#000;
            background:#fff;
        }
        .sdata{
           margin:10px;
           padding:5px;
           font-size:15px;
           border:2px solid #262626;
        }

JS CODE:

 var number = "",
          word = "";
      function add() {
          var variable = document.getElementById("variable").value;
          if (!isNaN(variable)) {
              number += variable + " - ";
          }
          if (isNaN(variable)) {
              word += variable + " - ";
          }
          if (variable == "") {
              window.alert("do not leave this field empty")
          }
      }
      function show() {
          document.getElementById("numbers").innerHTML = "numbers: " + number;
          document.getElementById("words").innerHTML = "words: " + word;
      }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: