Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS HTML Coding

K

kipper1960

New Coder
Hi all, new to the community, I have a basic understanding of coding and require some help on some HTML code for a small project, basically I would enter values into the 2 input boxes, the outcome sentence at the bottom is hidden until I click on a button which will #1 - Insert the 2 input words into there correct positions in the bottom sentence and #2 show the sentence, I'm struggling trying to work out the button code and to tie it all together, or if anyone would have any better ideas

Code: 
<html>
<div class="form-group wizard-input-container" data-var-code="identity"> 
<label class="control-label wizard-input-label" for="identity">Name:
    <br>
    <br>
    </label>
<input title="Name" type="text" class="form-control wizard-form-var-input" name="wizard_vars[identity]" id="identity0" data-var-code="identity" data-var-group="" data-var-index-in-group="0">
<div class="wizard-field-footer" data-field-name="wizard_vars[identity]">
    <div class="form-text text-muted wizard-field-description"><strong>"My Full Name is a / an ____."</strong><br>(Ex:Please use full name.)</div>
        </div>
      </div>
      <br>
<br>
<br>
<div class="form-group wizard-input-container" data-var-code="topic">
<label class="control-label wizard-input-label" for="topic10">Your #1 first choice:
    <br>
    <br>
    </label>
    
  <input title="Your #1 first choice" type="text" class="form-control wizard-form-var-input" name="wizard_vars[topic]" id="topic10" data-var-code="topic" data-var-group="" data-var-index-in-group="0">
  <div class="wizard-field-footer" data-field-name="wizard_vars[topic]">
   <div class="form-text text-muted wizard-field-description"><strong>"My preferred course is ____."</strong><br>(Ex: scientific studies, maths A+.)</div>
    </div>
    
    <br>
    <br>
    <br>
    <br>
    <span id="copy_1" class="clippable-section">This is to certify <strong><a class="var-input-link" data-var-code="indentity" data-var-answer-index="0">""</a></strong> Has been enrolled
    <strong><a class="var-input-link" data-var-code="topic" data-var-answer-index="0">""</a></strong> </span>
</div>
</html>
 
Sort by date Sort by votes
I just made it my way. You can design it as you want.
html -
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>HTML Coding</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="main">
        <div class="container">
        
            <div class="content">
                <label>Name:</label>
                <input type="text" id="identity0" />
                <p><strong>"My Full Name is a/an_____."</strong></p>
                <p>(Ex: Please use full name.)</p>
            </div>
            
            <div class="content">
                <label>Your #1 first choice:</label>
                <input type="text" id="topic10" />
                <p><strong>"My preferred course is_____."</strong></p>
                <p>(Ex: scientific studies, maths A+.)</p>
            </div>
            
            <button type="button" onclick="myFunction()">Submit</button>
            
            <div id="result">
                This is to certify "" Has been enrolled "".
            </div>
        </div>
    </div>
    
    <script>
        var identity = document.getElementById("identity0");
        var topic = document.getElementById("topic10");
        var result = document.getElementById("result");
        
        function myFunction() {
            result.innerHTML = 'This is to certify "' + identity.value + '" Has been enrolled "' + topic.value + '".';
        }
    </script>

</body>

</html>
css -
CSS: 
* {
    margin: 0;
    padding: 0;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 50%;
    height: 50%;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #000;
}

.content {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.content input[type="text"] {
    width: 60%;
}

.container button {
    margin-bottom: 1rem;
    padding: 0.5rem 2rem;
    color: #000;
    background-color: #F8AC08;
    font-size: 1.2rem;
    border: none;
    border-radius: 5rem;
}

.container button:hover {
    cursor: pointer;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.6);
}
 

Attachments

  • result.jpg
    result.jpg
    85.5 KB · Views: 3
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom