I am brand new to jQuery, I'm proficient in HTML, CSS, and JavaScript. I've set up a little test form and I just need help getting the ball rolling. I'm trying to add the class of 'form-control' to all my inputs on the page and I can't seem to figure it out.
$(document).ready(function() {
$('input').addClass('form-control');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="row">
<div class="col-md-3 form-floating">
<input type="text" placeholder="First Name" id="firstName">
<label for="firstName">First Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Last Name" id="lastName">
<label for="lastName">Last Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Phone" id="phone">
<label for="phone">Phone</label>
</div>
<div class="col-md-3 form-floating">
<input type="email" id="email" placeholder="Email">
<label for="email">Email</label>
</div>
</div>
</form>
Add this script to the head on document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
and it should work, and check chrome devtools if you have other errors.